<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./dist/css/bootstrap.min.css">
    <script src="./vue.js"></script>
    <style>
        /* .yincang{
            display: none;
        }
        .xianshi{
            display: block;
        } */
    </style>
</head>

<body>
    <div class="container" id="app">
        <div class="form-group">
            <label for="exampleInputEmail1">姓名</label>
            <input type="text" class="form-control" id="exampleInputEmail1" placeholder="姓名" v-model="name">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">电话</label>
            <input type="text" class="form-control" id="exampleInputPassword1" placeholder="电话" v-model="tel">
        </div>

        <button type="submit" class="btn btn-info  xianshi" @click="_click1" v-show="Okis">添加</button>
        <button type="submit" class="btn btn-info  yincang" @click="_xiu" v-show="isOk" >修改</button>
        
        <button type="submit" class="btn btn-warning" @click="_modify">重置</button>

        <table class="table table-bordered">
            <tr>
                <td>编号</td>
                <td>姓名</td>
                <td>电话</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item,index) in arr"  >
                <td >{{index+1}}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.tell }}</td>
                <td>
                    <button class="btn btn-danger" @click="_del(index)">删除</button>

                    <button class="btn btn-warning"@click="_xiugai(index)">修改</button>
                </td>
            </tr>
            <tr>
                <td style="border: none;" v-show="arr.length<1">暂无数据</td>
                <td style="border: none;"><button class="btn btn-danger" @click="_alldel" v-show="arr.length>=1">全部删除</button></td>
            </tr>
        </table>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                name: "",
                tel: "",
                arr: [],
                isOk:false,
                Okis:true,
                shuju:true,
                index:0

            },
            methods: {
                _click1() {
                    if (this.name == '' || this.tel == "") {
                        alert("请输入账号或密码")
                        return
                    }
                    this.arr.push({
                        name: this.name,
                        tell: this.tel,
                    }
                        ,)
                    this.name = ""
                    this.tel = ""
                    this.shanchu=true
                    this.shuju=false
                },
                _alldel() {
                    this.arr.splice(0)
                    this.shanchu=false
                    this.shuju=true 
                },
                _del(shanchu) {
                    this.arr.splice(shanchu, 1)
                  
                },
                _modify() {
                    this.name = ""
                    this.tel = ""
                },
                _xiugai(gai){
                    this.name = this.arr[gai].name
                    this.tel = this.arr[gai].tell
                    this.isOk = true
                    this.Okis = false
                    this.index = gai
                },
                _xiu(){
                    
                    if(this.name=="" ||this.tel == ""){
                        alert("姓名电话不能为空")
                        return
                    }
                    this.isOk = false
                    this.Okis = true
                    this.arr[this.index].name= this.name
                    this.arr[this.index].tel= this.tel
                    this.name = ""
                    this.tel = ""
                }

            },

        })
    </script>
</body>

</html>